<template>
	<div class='search-list'>
		<div class='headers'>
			<SearchHeader></SearchHeader>

		</div>


		<section >
			<ul v-if="this.goodsList.length > 0">
				<li v-for="(item, index) in goodsList" :key="index"
				@click="goDetail(item.g_id)">
					<img :src="item.imgUrl" alt="">
					<h3>{{ item.g_name }}</h3>
					<div class='price'>
						<div>
							<span>¥</span>
							<b>{{ item.g_price }}</b>
						</div>
						<div>立即购买</div>
					</div>
				</li>
			</ul>
			<van-empty v-else description="暂无商品数据" image-size="250px" />
		</section>


		<Tabber></Tabber>
	</div>
</template>

<script>
import SearchHeader from '@/components/search/SearchHeader.vue';
import Tabber from '@/components/common/Tabber.vue';
import { getGoodsList } from '@/api/search/goodsList';
import { Toast } from 'vant';



export default {
	data() {
		return {
			inputVal: '',
			goodsList: []
		}
	},
	components: {
		SearchHeader,
		Tabber,
	},
	created() {
		this.getGoods()

	},
	methods: {
		async getGoods() {
			let search = this.$route.query.search;

			const res = await getGoodsList(search)

			console.log(res);
			if (res.status === 408){
				Toast.fail(res.message);

				this.$router.push({path: '/login'})
			}
			
			if (res.status === 200) {
				console.log(res);
				
				this.goodsList = res.data
			}else{
				this.goodsList = []
			}

		},
		goDetail(id) {
            this.$router.push({path: '/detail', query: {id: id}})
            window.scrollTo(0, 0);
        }

	}

}
</script>

<style scoped>
section {
	flex: 1;
	overflow: hidden;
}

section ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

section ul li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 50%;
	padding: 0.266666rem;
}

section ul li img {
	width: 4.533333rem;
	height: 4.533333rem;
}

section ul li h3 {
	width: 100%;
	font-size: 0.373333rem;
	color: #222;
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

section ul li .price {
	display: flex;
	justify-content: space-between;
	padding: 0.266666rem 0;
	width: 100%;
	font-size: 14px;
}

section ul li .price div:first-child span {
	font-size: 0.32rem;
	color: #b0352f;
}

section ul li .price div:first-child b {
	color: #b0352f;
	font-size: 0.426666rem;
}

section ul li .price div:last-child {
	padding: 0.08rem 0.16rem;
	color: #fff;
	background-color: #b0352f;
	border-radius: 0.16rem;
}

.van-empty__description{
	font-size: 24px;
}
</style>